<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理 - 第二课堂素质拓展学分评定系统</title>
    
    <!-- 外部资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- CSS 框架 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 图表库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- 配置文件 -->
    <script src="js/config.js"></script>
</head>
<body class="bg-gray-50">
    <div class="flex flex-col h-screen">
        <!-- 头部导航 - 简约设计 -->
        <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shadow-sm">
            <div class="flex items-center space-x-4">
                <img src="images/log.svg" alt="logo" class="h-12 w-12">
                <span class="text-xl font-semibold text-gray-900">第二课堂素质拓展学分评定系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-600">
                    <i class="fas fa-user-circle text-xl mr-2"></i>
                    管理员：Web课程设计小组（6）
                </span>
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200 btn-hover">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    退出登录
                </button>
            </div>
        </header>

        <div class="flex flex-1 overflow-hidden">
            <!-- 侧边栏 - 简约设计 -->
            <aside class="sidebar">
                <nav class="py-4">
                    <div class="px-4 py-2">
                        <div class="text-gray-500 text-sm font-medium mb-2">主要功能</div>
                        <div class="space-y-1">
                            <div class="group">
                                <a href="student-management.html" class="nav-item active flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded">
                                    <i class="fas fa-users w-5 h-5 flex items-center justify-center"></i>
                                    <span class="ml-3">学生管理</span>
                                </a>
                                <!-- 二级菜单 -->
                                <div class="ml-8 mt-1 space-y-1 hidden group-hover:block">
                                    <a href="#student-list" class="block text-gray-600 hover:text-blue-600 text-sm">学生列表</a>
                                    <a href="#credit-statistics" class="block text-gray-600 hover:text-blue-600 text-sm">学分分布统计</a>
                                    <a href="#department-completion" class="block text-gray-600 hover:text-blue-600 text-sm">院系学分达标率</a>
                                </div>
                            </div>
                            <a href="data-management.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-database w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">数据管理</span>
                            </a>
                            <a href="statistics-analysis.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-chart-bar w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">统计分析</span>
                            </a>
                            <a href="credit-warning.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-exclamation-triangle w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学分警示</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </aside>
            
            <!-- 主内容区域 - 学生管理 -->
            <main class="main-content p-6 overflow-auto">
                <!-- 学生管理模块 -->
                <div class="mb-6" id="student-list">
                    <h1 class="text-2xl font-semibold text-gray-900 mb-4">学生管理</h1>
                    
                    <!-- 操作栏 - 简约设计 -->
                    <div class="flex justify-between items-center mb-4">
                        <div class="flex space-x-4">
                            <div class="relative">
                                <input type="text" placeholder="搜索学生姓名/学号" class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-64 focus:outline-none focus:border-blue-500 search-input">
                                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            </div>
                            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 btn-hover">
                                <i class="fas fa-plus mr-2"></i>添加学生
                            </button>
                        </div>
                        <div class="flex space-x-2">
                            <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200 btn-hover">
                                <i class="fas fa-upload mr-2"></i>导入
                            </button>
                            <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200 btn-hover">
                                <i class="fas fa-download mr-2"></i>导出
                            </button>
                        </div>
                    </div>

                    <!-- 学生表格 - 简约设计 -->
                    <div class="bg-white rounded-lg overflow-hidden border border-gray-200 table-shadow">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">院系</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年级</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已获学分</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <!-- 学生数据将通过 JavaScript 动态生成 -->
                            </tbody>
                        </table>
                        
                        <!-- 分页 - 简约设计 -->
                        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
                            <div class="flex-1 flex justify-between items-center">
                                <div>
                                    <p class="text-sm text-gray-700">
                                        显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">50</span> 条记录
                                    </p>
                                </div>
                                <div>
                                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                                        <!-- 分页按钮将通过 JavaScript 动态生成 -->
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计图表 - 简约设计 -->
                <!-- 已移除学分分布统计和院系学分达标率 -->
                
                <!-- 学分预警 - 简约设计 -->
                <div class="bg-white p-6 rounded-lg border border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">学分预警名单</h2>
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">院系</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已获学分</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预警等级</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="warning-list-body" class="divide-y divide-gray-200">
                            <!-- 预警学生数据将通过 JavaScript 动态生成 -->
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/navigation.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/studentManager.js"></script>
    <script src="js/main.js"></script>
    <script>
        // 初始化导航
        document.addEventListener('DOMContentLoaded', function() {
            const navigation = new NavigationManager();
            navigation.initPage();
        });
        // 动态渲染学分预警名单
        document.addEventListener('DOMContentLoaded', async function() {
            const res = await fetch('http://localhost:3000/api/students');
            const students = await res.json();
            const warningStudents = students.filter(s => Number(s.credits) < 4);
            const tbody = document.getElementById('warning-list-body');
            tbody.innerHTML = warningStudents.map(s => `
                <tr class="hover:bg-gray-50 transition-colors duration-200">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${s.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${s.name}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${s.department}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${s.major}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${s.credits}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="status-badge ${s.credits < 2 ? 'status-danger' : 'status-warning'}">
                            ${s.credits < 2 ? '严重警告' : '警告'}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button class="text-blue-600 hover:text-blue-800">发送通知</button>
                    </td>
                </tr>
            `).join('');
        });
    </script>
</body>
</html> 